import * as echarts from 'echarts'
import '../../../public/world.json'
function initWorldMapCharts()
    {
        const dom = document.getElementById("map");
        const myChart4 = echarts.init(dom);
        const app = {};
        let option2;

// myChart.showLoading();
    $.when(
        $.getJSON(this.$BaseUrl+'/asiangameCountInfo/getall'),
        $.getJSON(this.$BaseUrl+'/comparisonTable/getall'),
        $.getJSON('./world.json'),
    ).done(function (res0,res1,geoJson) {
            // myChart.hideLoa
            //预处理后端数据
            console.log(res0[0])
            const arrArr={};
            const data1=res1[0];
            const data2=[];
            let tmp={name:[],values:[]};
            let dimension1=Object.keys(res0[0][0]);
            res0[0].forEach((values,index)=>{
                  data2.push({name:values[dimension1[7]],value:index+1});
            });
            console.log(data2);
            console.log(data1)
            let dimensions=Object.keys(data1[0]);
            console.log(dimensions)
            data1.forEach((values,index)=>{
                arrArr[values[dimensions[2]]]=values[dimensions[1]];
            })
            console.log('________________________',arrArr);
            const featArr = geoJson[0].features;
            const myfeatures=[];
            for (let i = 0; i < featArr.length; i++) {
                data1.forEach((values,index)=>{

                   if(featArr[i].properties.name===values[dimensions[2]]){
                       myfeatures.push(featArr[i]);
                   }
                })
            };
            console.log(myfeatures)
            const mapJson = {
                type: 'FeatureCollection',
                features: myfeatures
            }; //自定义地图数据，标准地图json格式

        echarts.registerMap('world',mapJson);
        myChart4.setOption(
                (
                    option2 = {
                    title: {
                        text: '各届亚运会举办国',
                        subtext:'数据来源:百度百科'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}<br/>第{c}届'
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            dataView: {readOnly: false},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    visualMap: {
                        min: 1,
                        max: 18,
                        text: ['High', 'Low'],
                        realtime: false,
                        calculable: true,
                        inRange: {
                            color: ['lightskyblue', 'yellow','red','orange']
                        }
                    },
                    series: [
                        {
                            name: '亚州地图',
                            type: 'map',
                            map: 'world',
                            zoom: 1.1,
                            itemStyle: { // 每个区域的样式
                                normal: {
                                    areaColor:'blue',
                                    borderColor: '#D3D7E1', // 图形的描边颜色
                                    borderWidth:0.1 //描边线宽
                                },
                                emphasis: { // 高亮状态
                                    areaColor: 'red'
                                }
                            },
                            label: {
                                show: false
                            },
                            data:data2,
                            nameMap:arrArr
                        }
                    ]
                })
            );
        });

        if (option2 && typeof option2 === 'object') {
            myChart4.setOption(option2);
        }

    }
export {
    initWorldMapCharts
}
